<!-- #layout name=blank -->
<div id="app">
  <div class="page-header">
    <h1 class="title">Menus</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a @click="showCreateModal=true" class="btn green navbar-btn">Create</a>
      <a
        class="btn red navbar-btn"
        v-show="selectedRows.length>0"
        @click="onDelete"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="model" show-select :selected.sync="selectedRows">
    <kb-table-column :label="Kooboo.text.common.name">
      <template v-slot="row">
        <a :href="getDetailUrl(row.id)" @click.stop="">{{ row.name }}</a>
      </template>
    </kb-table-column>

    <kb-table-column :label="Kooboo.text.common.usedBy">
      <template v-slot="row">
        <a
          class="label label-sm kb-table-label-refer"
          :style="{
                                background: Kooboo.getLabelColor(item.key.toLowerCase())
                              }"
          v-for="(item, index) in Kooboo.objToArr(row.relations)"
          :key="index"
          @click.stop="onShowRelationModal(item.key, row.id, Kooboo.Menu.name)"
        >
          {{
            item.value +
              " " +
              Kooboo.text.component.table[item.key.toLowerCase()]
          }}
        </a>
      </template>
    </kb-table-column>

    <kb-table-column :label="Kooboo.text.common.lastModified">
      <template v-slot="row">
        <span>
          {{ new Date(row.lastModified).toDefaultLangString() }}
        </span>
      </template>
    </kb-table-column>

    <kb-table-column width="10px">
      <template v-slot="row">
        <a
          class="btn blue btn-xs"
          :href="getVersionsUrl(row.keyHash,row.storeNameHash)"
          @click.stop=""
          target="_blank"
        >
          <i class="fa fa-clock-o"></i>
        </a>
      </template>
    </kb-table-column>
  </kb-table>
  <kb-relation-modal></kb-relation-modal>
  <div
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    v-kb-modal="showCreateModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button data-dismiss="modal" class="close"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">New menu</h4>
        </div>
        <div class="modal-body" v-if="showCreateModal">
          <kb-form
            :model="createModel"
            :rules="createModelRules"
            ref="createForm"
          >
            <kb-form-item prop="Name">
              <label class="col-md-2 control-label">Name</label>
              <div class="col-md-10">
                <input
                  type="text"
                  class="form-control"
                  v-model="createModel.Name"
                />
              </div>
            </kb-form-item>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button @click="onCreateSubmit" class="btn green">Create</button>
          <button data-dismiss="modal" class="btn gray">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/components/kbBreadcrumb.js",
    "/_Admin/Scripts/components/kbForm.js",
    "/_Admin/Scripts/components/kbTable.js",
    "/_Admin/Scripts/components/kbRelationModal.js"
  ]);

  new Vue({
    el: "#app",
    data: function() {
      var me = this;
      return {
        breads: [
          {
            name: "SITES"
          },
          {
            name: "DASHBOARD"
          },
          {
            name: Kooboo.text.common.Menus
          }
        ],
        model: [],
        selectedRows: [],
        showCreateModal: false,
        createModel: {
          Name: ""
        },
        createModelRules: {
          Name: [
            { required: Kooboo.text.validation.required },
            {
              pattern: /^([A-Za-z][\w\-\.]*)*[A-Za-z0-9]$/,
              message: Kooboo.text.validation.objectNameRegex
            },
            {
              min: 1,
              max: 64,
              message:
                Kooboo.text.validation.minLength +
                1 +
                ", " +
                Kooboo.text.validation.maxLength +
                64
            },
            {
              remote: {
                url: Kooboo.Menu.isUniqueName(),
                data: function() {
                  return {
                    name: me.createModel.Name
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ]
        }
      };
    },
    mounted: function() {
      this.getData();
    },
    methods: {
      getData: function() {
        var me = this;
        Kooboo.Menu.getList().then(function(res) {
          if (res.success) {
            me.model = res.model;
          }
        });
      },
      getDetailUrl: function(id) {
        return Kooboo.Route.Get(Kooboo.Route.Menu.DetailPage, {
          Id: id
        });
      },
      onShowRelationModal: function(by, id, type) {
        Kooboo.EventBus.publish("kb/relation/modal/show", {
          by: by,
          type: type,
          id: id
        });
      },
      getVersionsUrl: function(keyHash, storeNameHash) {
        return Kooboo.Route.Get(Kooboo.Route.SiteLog.LogVersions, {
          KeyHash: keyHash,
          storeNameHash: storeNameHash
        });
      },
      onCreateSubmit: function() {
        var me = this;
        if (this.$refs.createForm.validate()) {
          Kooboo.Menu.Create(this.createModel).then(function(res) {
            if (res.success) {
              me.getData();
              me.showCreateModal = false;
            }
          });
        }
      },
      onDelete: function() {
        var me = this;
        var haveRelations = this.selectedRows.some(function(s) {
          return s.relations && Object.keys(s.relations).length;
        });

        var confirmStr = haveRelations
          ? Kooboo.text.confirm.deleteItemsWithRef
          : Kooboo.text.confirm.deleteItems;

        var ids = this.selectedRows.map(function(m) {
          return m.id;
        });

        if (!confirm(confirmStr)) return;

        Kooboo[Kooboo.Menu.name]
          .Deletes({
            ids: ids
          })
          .then(function(res) {
            if (res.success) {
              me.getData();
              window.info.done(Kooboo.text.info.delete.success);
            } else {
              window.info.done(Kooboo.text.info.delete.fail);
            }
          });
      }
    },
    watch: {
      showCreateModal: function() {
        this.createModel.Name = "";
      }
    }
  });
</script>
